<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>非单文件组件_组件嵌套</title>
  </title>
  </title>
  <!-- 引入Vue -->
  <script src="../../js/vue.js"></script>
</head>

<body>

  <!-- 准备容器 -->
  <div id="root">
    <h2>{{msg}}</h2>
    <hr>
    <!-- 第三步使用组件(写组件标签)，也可以将组件标签写到vm的template中，这样模板就很干净 -->
    <!-- <app></app> -->
    <!-- <school /> -->
    <!-- 不用使用脚手架时，<school/>会导致后续组件不能渲染。 -->
    <!--     <school />
    <school /> -->

  </div>

</body>
<script type='text/javascript'>
  Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

  // 简写方式
  // 第一步创建student组件,给school组件注册一个子组件，必须定义在school前面（先定义在使用）
  const student = {
    data () {
      return {
        studentName: '张三',
        age: 18
      }
    },
    // 配置模板
    template: `
        <div>
          <h2>学生名称：{{studentName}}</h2>
          <h2>学生年龄：{{age}}</h2>
        </div>
      `,
  };

  // 第一步创建school组件
  const school = Vue.extend({
    // el:'#root' //定义组件一定不能配置el，因为最终所有组件都被vm管理，由vm决定组件服务哪个模板
    //data必须写成函数式，避免组件被复用时，数据存在引用关系。
    data () {
      return {
        schoolName: 'Vue学院',
        address: '武汉'
      }
    },
    // 配置模板
    template: `
            <div>
              <h2>学校名称：{{schoolName}}</h2>
              <h2>学校地址：{{address}}</h2>
              <button @click="showName">点击显示学校名称</button>
              <student></student>
            </div>
          `,
    methods: {
      showName () {
        alert(this.schoolName);
      }
    },
    //配置在开发者工具里面显示的组件名，一般是第三方插件或者大型项目用来区分组件使用
    name: 'xuexiao',
    //注册一个子组件student
    components: {
      student
    }
  });

  // 第一步创建hello组件
  const hello = Vue.extend({
    data () {
      return {
        studentName: '张三',
        age: 18,
        msg: 'world!'
      }
    },
    // 配置模板
    template: `
        <div>
          <h2>hello{{msg}}</h2>
        </div>
      `,
  });

  //定义一个app组件来管理所有的组件，vm只用管理app就行
  const app = Vue.extend({
    components: {
      school,
      hello
    },
    template: `
      <div>
      <hello></hello>
      <school></school>
      </div>
    `
  });

  // 创建一个Vue实例
  new Vue({
    el: '#root',
    //第二步注册组件(局部注册)
    components: { app },
    data: {
      msg: 'Vue组件化编程'
    },
    template: `<app></app>`
  });

</script>

</html>